<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>整体入口页</title>
		<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
	<style>
	/* reset */  
	body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0;padding:0}  /* 初始化标签在所有浏览器中的margin、padding值 */  
	fieldset,img {border:0 none}  /* 重置fieldset（表单分组）、图片的边框为0*/  
	dl,ul,ol,menu,li {list-style:none}   /* 重置类表前导符号为onne,menu在HTML5中有效 */  
	blockquote, q {quotes: none}   /* 重置嵌套引用的引号类型 */  
	blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}  /* 重置嵌套引用*/  
	input,select,textarea,button {vertical-align:middle}  /* 重置表单控件垂直居中*/  
	button {border:0 none;background-color:transparent;cursor:pointer}  /* 重置表单button按钮效果 */  
	body {background:#fff}   /* 重置body 页面背景为白色 */  
	body,th,td,input,select,textarea,button {font-size:14px;line-height:1 ;font-family:"微软雅黑", "黑体","宋体";color:#666} /* 重置页面文字属性 */  
	a {color:#666;text-decoration:none}  /* 重置链接a标签 */  
	a:active, a:hover {text-decoration:none}   /* 重置链接a标签的鼠标滑动效果 */  
	address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}  /* 重置样式标签的样式 */  
	caption {display:none;}    /* 重置表格标题为隐藏 */  
	table {width:100%;border-collapse:collapse;border-spacing:0;table-layout:fixed;}    /* 重置table属性 */  
	img{vertical-align:top}  /* 图片在当前行内的垂直位置 */  
	.clearfix{clear:both;overflow:hidden;_zoom:1;}
	/* reset */
	body{
		background:#efefef ;
		background-repeat: no-repeat;
		background-size: cover;
	}
	header{
		width:100%;
		height: 50px;
		background-color: #FFFFFF;
		box-shadow: 1px 2px 3px #716868;
		position: fixed;
		top:0;
		left: 0;
		z-index: 200;
		
	}
	.header-in{
		width:1080px;
		height: 50px;
		margin:0 auto;
	}
	.logo{
		float: left;
		width:450px;
	}
	.logo h1{
		width:220px; 
		height: 50px;
		float: left;
		letter-spacing: 30px;
		background: url(images/logo.png) no-repeat 0px 9px;
		position: relative;
	}
	.logo h1 a{
		position: absolute;
		left:-9999px;	
	}
	.banbox{
		width: 100%;
		height:200px;
		margin-top:50px;
		margin-bottom: 30px;
		background: url(images/20097.jpg) center center;
	}
	.banbox h1{
		text-align: center;
		line-height:180px;
		font-size: 26px;
		color: #FFFFFF;
	}
	.container{
		width:1200px;
		height:auto;
		min-height: 500px;
		margin:20px auto;
	}
	.portalbox a{
		display: block;
		width:180px;
		height:70px;
		float: left;
		margin:15px 10px;
		border-radius:4px;
		text-align: center;
		line-height: 70px;
		font-size: 18px;
	}
	.portalbox a.por1{
		opacity: 0.9;
		background: #b5efb5;
		color:#779f71;	
	}
	.portalbox a.por2{
		opacity: 0.9;
		background: #a4e9ff;
		color:#64929a;	
	}
	.portalbox a.por3{
		opacity: 0.9;
		background: #b0c2f5;
		color:#5f7ed6;	
	}
	.portalbox a.por4{
		opacity: 0.9;
		background: #f5eab0;
		color:#9a8f64;	
	}
	.portalbox a.por5{
		opacity: 0.9;
		background: #f7bba4;
		color:#9a6464;	
	}
	.portalbox a.por6{
		opacity: 0.9;
		background: #d0affb;
		color:#74649a;	
	}
	.portalbox a.por7{
		opacity: 0.9;
		background: #5a81f1;
		color:#244cbf;	
	}
	.portalbox a.por8{
		opacity: 0.9;
		background: #e4ba85;
		color:#af6c16;	
	}
	.portalbox a.por9{
		opacity: 0.9;
		background: #90c8f9;
		color:#53708a;	
	}
	.portalbox a.por10{
		opacity: 0.9;
		background: #b0f5e9;
		color:#4a9a8c;	
	}
	.portalbox a.por11{
		opacity: 0.9;
		background: #dc6fd3;
		color:#b333a8;	
	}
	.portalbox a.por12{
		opacity: 0.9;
		background: #7aaeff;
		color:#4072bf;	
	}
	.portalbox a:hover{
		opacity: 1;
	}
	</style>		
	</head>
	<body>
		<header>
			<div class="header-in">
				<div class="logo">
					<h1>
						<a href="#">
							入口页面
						</a>
					</h1>
				</div>
			</div>
		</header>
		<div class="banbox">
			<h1>首都医科大学网站入口界面</h1>
		</div>
		<div class="container">
			
			<div class="portalbox">
				<a href="../index.html" class="por1">对外门户</a>
				<a href="../heYaTeacher.html" class="por2">和雅教师</a>
				<a href="../juvenile.html" class="por3">百合少年</a>
				<a href="#" class="por4">班级空间</a>
				<a href="#" class="por5">学生空间</a>
				<a href="#" class="por6">教师空间</a>
				<a href="#" class="por7">OA办公</a>
				<a href="#" class="por8">后台管理</a>
				<a href="#" class="por9">对外门户</a>
				<a href="#" class="por10">和雅教师</a>
				<a href="#" class="por11">百合少年</a>
				<a href="#" class="por12">班级空间</a>
			</div>
		</div>
	</body>
</html>
